import React, { Component } from "react";
import Alert from "./components/Alert";

class Chapter8 extends Component {
    addressRef = React.createRef();
    alertRef = React.createRef();
    constructor(props) {
        super(props);
    }
    refEvent = () => {
        console.log(this.refs.nameRef.value);
        console.log(this.ageRef.value);
        console.log(this.addressRef.current.value);
        // console.log(this.alertRef.current);
        this.alertRef.current.increment();
    };
    render() {
        const { title } = this.props;
        return (
            <div className='wrapper wrapper8'>
                <div className='page-header'>
                    <h3>{title}</h3>
                </div>
                <div className='page-content'>
                    <div className='form-group'>
                        <input
                            type='text'
                            className='form-control'
                            ref='nameRef'
                            placeholder='请输入名字'
                        />
                    </div>
                    <div className='form-group'>
                        <input
                            type='text'
                            className='form-control'
                            placeholder='请输入年龄'
                            ref={(age) => (this.ageRef = age)}
                        />
                    </div>
                    <div className='form-group'>
                        <input
                            type='text'
                            className='form-control'
                            placeholder='请输入详细地址'
                            ref={this.addressRef}
                        />
                    </div>
                    <div className='btn btn-primary' onClick={this.refEvent}>
                        获取
                    </div>
                    <hr />
                    <Alert ref={this.alertRef} />
                </div>
            </div>
        );
    }
}

export default Chapter8;
